<html>
<head><style>
  tr        { height: 1em;  }
  td.wide   { width: 500px; }

  td.orange { background: orange;    }
  td.purple { background: purple;    }
  td.teal   { background: teal;      }
  td.blue   { background: lightblue; }
</style></head>
<body>
  <p>(x,x) labels indicate the column & row order of the orange cell.</p>

  <br/>(0,0)
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="orange wide"></td>
      <td class="orange"></td>
      <td class="purple"></td>
    </td>
    </tr><tr>
      <td class="teal">x</td>
      <td class="blue" colspan="2">y z</td>
    </tr>
  </table>

  <br/>(0,1)
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="teal">x</td>
      <td class="blue" colspan="2">y z</td>
    </td>
    </tr><tr>
      <td class="orange wide"></td>
      <td class="orange"></td>

      <td class="purple"></td>
    </tr>
  </table>

  <br/>(1,0)
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="purple"></td>
      <td class="orange"></td>
      <td class="orange wide"></td>
    </td>
    </tr><tr>
      <td class="blue" colspan="2">y z</td>
      <td class="teal">x</td>
    </tr>
  </table>

  <br/>(1,1)
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="blue" colspan="2">y z</td>
      <td class="teal">x</td>
    </td>
    </tr><tr>
      <td class="purple"></td>
      <td class="orange"></td>
      <td class="orange wide"></td>
    </tr>
  </table>
</body>
</html>
